<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Rating Demo</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" language="JavaScript" src="lib/prototype/prototype.js">
        </script>
        <script type="text/javascript" language="JavaScript" src="Rating.js">
        </script>
        <style type="text/css">
            .ResultItemRating {
                text-align: center;
            }

            .ClearFloat {
                clear: both;
            }
        </style>
    </head>
    <body onload="ratingDemo()">
        <div class="ResultItemRating">
            <div id="Rating1" style="width:65px;">
                <a id="RatingBar1" title="1" style="text-decoration:none;">
                    <span id="RatingBar1_Star_1" class="ratingStar filledRatingStar" style="float:left;">&nbsp;</span>
                    <span id="RatingBar1_Star_2" class="ratingStar filledRatingStar" style="float:left;">&nbsp;</span>
                    <span id="RatingBar1_Star_3" class="ratingStar emptyRatingStar" style="float:left;">&nbsp;</span>
                    <span id="RatingBar1_Star_4" class="ratingStar emptyRatingStar" style="float:left;">&nbsp;</span>
                    <span id="RatingBar1_Star_5" class="ratingStar emptyRatingStar" style="float:left;">&nbsp;</span>
                </a>
                <span class="ClearFloat" />
            </div>
        </div>
        <div class="ResultItemRating">
            <div id="Rating2" style="width:65px;">
                <a id="RatingBar2" title="2" style="text-decoration:none;">
                    <span id="RatingBar2_Star_1" class="ratingStar filledRatingStar" style="float:left;">&nbsp;</span>
                    <span id="RatingBar2_Star_2" class="ratingStar filledRatingStar" style="float:left;">&nbsp;</span>
                    <span id="RatingBar2_Star_3" class="ratingStar emptyRatingStar" style="float:left;">&nbsp;</span>
                    <span id="RatingBar2_Star_4" class="ratingStar emptyRatingStar" style="float:left;">&nbsp;</span>
                    <span id="RatingBar2_Star_5" class="ratingStar emptyRatingStar" style="float:left;">&nbsp;</span>
                </a>
                <span class="ClearFloat" />
            </div>
        </div>
        <div id="status">
            status
        </div>
        <script type="text/javascript">
            /**
             *
             */
            function ratingDemo(){
                for (var i = 1; i < 3; i++) {
                    var rating = new Rating('RatingBar', i);
                    rating.emptyStarCssClass = 'emptyRatingStar';
                    rating.filledStarCssClass = 'filledRatingStar';
                    rating.starCssClass = 'ratingStar';
                    rating.waitingStarCssClass = 'savedRatingStar';
                    rating.initialize(i % 6, i, rateAsset);
                }
            }

            /**
             *
             * @param {int} ratingValue
             * @param {int} rollbackValue
             * @param {Object} ratingObj
             */
            function rateAsset(ratingValue, rollbackValue, ratingObj){
                ratingObj.set_Rating(ratingValue);
                var starString = (ratingValue > 1) ? 'stars' : 'star';
                alert('You rated ' + ratingValue + ' ' + starString + ' for item \"' + ratingObj.target + '\"!');
            }
        </script>
    </body>
</html>